<template>
	<view>
		<view class="bg">
			<view class="home-wheel">
				<raffle-wheel ref="raffleWheel" :prizeList="prizeList" strKey="prizeName"
					:canvas-width="canvasData.width" :canvas-height="canvasData.height"
					@actionStart="handleActionStart()" @actionEnd="handleActionEnd" @done="handleDrawDone"
					v-if="prizeList.length" />
			</view>
			
			<view class="img-106">
				<scroll-view :scroll-y="true" class="detail">{{obj.activityDescription}}</scroll-view>
			</view>
			
			<image @click="tips()" class="img-34" src="../../static/104.png"></image>
			
			<view style="height: 20rpx;"></view>
		</view>
		
		<view class="pos-left" @click="tips()">
			<image class="head" src=""></image>
			<view class="pos-name font-overflow">商家名称</view>
			<view class="pos-but">关注</view>
		</view>
		
	</view>

</template>
<script>
	export default {
		name: 'Home',
		data() {
			return {
				// canvas 宽高
				canvasData: {
					width: 490,
					height: 490
				},
				
				id: '',
				
				obj: {},
				
				// 奖品数据
				prizeList: [],
				// 中奖下标
				targetIndex: 5,
				allcount: 1,
				acName: '',

			};
		},
		onLoad(options) {
			if (options.id){
				this.id = options.id;
				this.detail();
			}
		},

		onShow() {
			
		},

		methods: {
			
			//活动详情
			async detail() {
				const result = await this.$http.get({
					url: this.$api.selectGetId,
					data: {
						id: this.id,
					}
				});
				if (result.code == 2000) {
					this.prizeList = result.data.listofprizes;
					this.obj = result.data;
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},
			
			tips() {
				this.$sun.toast("此页面为活动预览页!",'none');
			},
			
			handleDrawDone() {
			},
			// 本次抽奖开始
			handleActionStart() {
				this.tips();
			},
			// 本次抽奖结束
			handleActionEnd() {
			}
		},
		
	};

	
</script>

<style lang="scss" scoped>
	
	$wheelBgUrl: '~static/raffle-wheel/raffle-wheel__bg';
	
	.detail {
		width: 580rpx;
		height: 340rpx;
		color: #FFFFFF;
		padding: 120rpx 40rpx 40rpx;
	}
	
	.img-106 {
		background: url('~static/106.png');
		width: 674rpx;
		height: 526rpx;
		background-repeat: no-repeat;
		background-size: contain;
		margin: 200rpx 38rpx 40rpx 38rpx;
	}
	
	.pos-but {
		width: 80rpx;
		border-radius: 36rpx;
		background-color: #FFBC00;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		padding: 10rpx;
	}
	
	.pos-name {
		width: 160rpx;
		color: #FFFFFF;
	}
	
	.head {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background-color: #aaaaaa;
		margin-right: 14rpx;
	}
	
	.pos-left {
		width: 320rpx;
		background: rgba(0, 0, 0, 0.40);
		border-radius: 60rpx;
		z-index: 9;
		position: fixed;
		top: 40rpx;
		left: 20rpx;
		display: flex;
		align-items: center;
	}
	
	.myAward {
		text-align: center;
		line-height: 64rpx;
		position: absolute;
		width: 152rpx;
		height: 64rpx;
		border-radius: 200rpx 0rpx 0rpx 200rpx;
		background: rgba(0, 0, 0, 0.50);
		top: 44rpx;
		right: 0;
		color: #fff;
		font-size: 28rpx;
	}
	
	page {
		background-color: #7242E4;
	}
	
	.bg {
		background: url('~static/32.png');
	
		width: 750rpx;
		height: 1502rpx;
		background-repeat: no-repeat;
		background-size: contain;
	
	}
	
	.img-34 {
		width: 510rpx;
		height: 108rpx;
		margin-left: 120rpx;
	}
	
	.home-wheel {
		padding: 478rpx 0 0 0rpx;
		text-align: center;
	}
</style>